a {
	font-weight:bold;
}
body {
	max-width: 950px;
	font-size:140%;
}
#calculator{
	width:100%;
}
/*.col-xs-6, .col-xs-2, .col-xs-3, .col-xs-5, .col-xs-7, .col-xs-10  {
padding-left: 5px !important;
padding-right: 5px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}*/
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 0px;
    margin: 0px;
    
}





.form-group{
	float: left;
	line-height:13px;
	margin:2px;
}

#top{
	background-color:#eeeeee;
	border-radius:10px;
	width:100%;
}
#graph{
	padding:10px;
	padding-bottom:15px;
	margin:0px;
}

.js-plotly-plot .plotly .modebar{left: 88%; top:93%;}

#stockpct,#bondpct,#cashpct{
	background-color: #b3d8b3;
}

/* disable legend items (individually 1-4)*/
#myDiv .legend .traces:nth-of-type(1) .legendtoggle, #myDiv .legend .traces:nth-of-type(2) .legendtoggle,#myDiv .legend .traces:nth-of-type(3) .legendtoggle, #myDiv .legend .traces:nth-of-type(4) .legendtoggle, #myDiv .legend .traces:nth-of-type(5) .legendtoggle, #myDiv .legend .traces:nth-of-type(6){
   display: none;
}

/*input boxes*/
#annualspending, #totalsavings{
	width:100px;
}

#flexpct{
	width:40px;
	border-color:darkred;
}
#retireage, #cyclelength, #stockpct, #bondpct, #cashpct{
	width:40px;
}



.choice {
	font-size:100%;
	white-space: nowrap;

}
 .inputbox {
 	font-size:100%;
	height:20px;
	margin-left:5px;
	text-align: center;
	border-radius:5px;
	border-width:1px;
	border-color: lightgrey;
	border-style:solid;
}


input[type="radio"]{
	margin-left:3px;
}
button[type="button"] {
	font-size:100%;
	height:20px;
	padding:2px;
	margin-left:10px !important;
}

label {
	font-size:100%;
	margin-left:10px;
}


#errormsg {
	font-weight:bold;
	color:red;
	position: absolute;
   left: 12.5%;
   top: 300px;
   z-index: 1000;
   background-color: rgba(255,255,255,.7);
   padding: 0px;
   font-size:200%;
   width:75%;
   }

#updateallocation{
	background-color:#b3d8b3;
	color:black;
	font-weight:bold;
	border-color:lightgrey;
	white-space:normal !important;
    max-width:170px;
}

.errorfloat {
   position:absolute;
   width:100%;
}

.spacer1{
	display:inline-block;
	width: 10px;
}


.container{
	margin:0px;
	padding-left:0px;
	padding-top:10px;
	padding-bottom:10px;
}

#death {
	background-color: rgba(94,94,94,.8);
	padding:4px;
	border-radius:3px;
	color: black;
}

#below {
	background-color: rgba(139,230,139,.9);
	padding:4px;
	border-radius:3px;
	color: black;
}

.wedgetoggle{
	color:white;
	font-weight:normal;
	height:24px;

}

#spendflex{
	color:darkred;
}

#above {
	background-color: rgba(20,124,20,.8);
	padding:4px;
	border-radius:3px;
	color: black;
}

#high {
	background-color: rgba(6,68,8,.8);
	padding:4px;
	border-radius:3px;
	color: black;
	width:200px;
}

#death, #below, #above, #high{
	margin-left:4px;
	margin-right:4px;

}

#taxrate,#invfees{
	width:40px;
}
 
#incomevalue,  #expensevalue {
	width:200px;
	
}

#incomestart, #incomeend, #expensestart, #expenseend {
	width:100px;

}

.respbutton{
	padding:0px !important;
	margin:0px !important;
	line-height: 100%;
	width:140px;
}

#top{

}

.check{
	vertical-align: bottom;
}


@media only screen and (max-width: 750px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    
    body {
	font-size:140%;
	}

	#annualspending, #totalsavings {
		width:100px;
	}

	#incomevalue,  #expensevalue {
	width:200px;
	}

	#incomestart, #incomeend, #expensestart, #expenseend {
	width:100px;
	}

	.spacer1{
		display:inline-block;
		width: 10px;
	}

	#taxrate,#invfees{
		width:40px;
	}

	label {
		
		margin-left:12px;
	}
}

@media only screen and (max-width: 380px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    
    body {
	font-size:120%;
	}

	#totalsavings {
		width:80px;
	}

	#annualspending {
		width:65px;
	}

	#flexpct{
		width:40px;
	}

	#incomevalue,  #expensevalue {
	width:160px;
	}

	#incomestart, #incomeend, #expensestart, #expenseend {
	width:80px;
	}

	.spacer1{
		display:inline-block;
		width: 7px;
	}

	#taxrate,#invfees{
		width:30px;
	}

	label {
		font-size:100%;
		margin-left:4px;
	}

	.respbutton{
	width:120px;
}

#death, #below, #above, #high{
	margin-left:1px;
	margin-right:1px;

}
}

.wedges{
	float:left;
	height:30px;
	vertical-align: text-bottom;
	white-space: nowrap;
}

.wedges label{
	padding-top:7px;
}

#bottom div
{
    border-style:solid;
    border-width:5px;
}